<template>
	<b-layout-index>
		<navbar></navbar>
		<!-- 		<u-calendar :show="calendarFlag" :maxDate="maxDate" :minDate="minDate" mode="range" @confirm="calendarConfirm"
			@close="closeCalendar" :monthNum="24">
		</u-calendar> -->
		<view class="">
			<!-- 	<view class="dateheader" @click="openCalendar()">
				<text>{{startDate}}</text> ⁓ <text>{{endDate}}</text>
			</view> -->
			<view class="pd-left-10 pd-right-10  mg-bottom-10 mg-top-10">
				<base-panel-title :title="$t('提货统计')" :isRadius="true" :fill="true">
					<view class="pd-bottom-10 pd-top-10">
						<u-grid :border="false" col="3">
							<u-grid-item>
								<text class="icon font-size-18 font-bold">{{info.order.count}}</text>
								<text class="grid-text  font-size-12   u-info">{{$t('订单数量')}}</text>
							</u-grid-item>
							<u-grid-item>
								<text class="icon font-size-18 font-bold color-price price">{{info.order.price}}</text>
								<text class="grid-text  font-size-12   u-info">{{$t('订单金额')}}</text>
							</u-grid-item>
							<u-grid-item>

								<text class="icon font-size-18 font-bold">{{info.order.quantity}}</text>
								<text class="grid-text font-size-12 u-info">{{$t('产品总件数')}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</base-panel-title>
			</view>



			<view class="pd-left-10 pd-right-10  mg-bottom-10 mg-top-10">
				<base-panel-title :title="$t('充值统计')" :isRadius="true" :fill="true">
					<view class="pd-bottom-10 pd-top-10">
						<u-grid :border="false" col="3">
							<u-grid-item>
								<text class="icon font-size-18 font-bold">{{info.wallet.count}}</text>
								<text class="grid-text  font-size-10   u-info">{{$t('充值次数')}}</text>
							</u-grid-item>
							<u-grid-item>
								<text class="icon font-size-18 font-bold color-price price">{{info.wallet.price}}</text>
								<text class="grid-text  font-size-10   u-info">{{$t('充值金额')}}</text>
							</u-grid-item>
							<u-grid-item>

								<text
									class="icon font-size-18 font-bold color-price price">{{info.wallet.priceAll}}</text>
								<text class="grid-text font-size-10 u-info">{{$t('累计充值')}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</base-panel-title>
			</view>

			<view class="pd-left-10 pd-right-10  mg-bottom-10 mg-top-10">
				<base-panel-title :title="$t('团队统计')" :isRadius="true" :fill="true">
					<view class="pd-bottom-10 pd-top-10">
						<u-grid :border="false" col="3">
							<u-grid-item>
								<text class="icon font-size-18 font-bold">{{info.teamOrder.count}}</text>
								<text class="grid-text  font-size-10   u-info">{{$t('订单数量')}}</text>
							</u-grid-item>
							<u-grid-item>
								<text
									class="icon font-size-18 font-bold color-price price">{{info.teamOrder.price}}</text>
								<text class="grid-text  font-size-10   u-info">{{$t('订单金额')}}</text>
							</u-grid-item>
							<u-grid-item>

								<text class="icon font-size-18 font-bold">{{info.teamOrder.quantity}}</text>
								<text class="grid-text font-size-10 u-info">{{$t('产品总件数')}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</base-panel-title>
			</view>



			<view class="pd-left-10 pd-right-10  mg-bottom-10 mg-top-10">
				<base-panel-title :title="$t('团队充值统计')" :isRadius="true" :fill="true">
					<view class="pd-bottom-10 pd-top-10">
						<u-grid :border="false" col="3">
							<u-grid-item>
								<text class="icon font-size-18 font-bold">{{info.teamWallet.count}}</text>
								<text class="grid-text  font-size-10   u-info">{{$t('充值次数')}}</text>
							</u-grid-item>
							<u-grid-item>
								<text
									class="icon font-size-18 font-bold color-price price">{{info.teamWallet.price}}</text>
								<text class="grid-text  font-size-120  u-info">{{$t('充值金额')}}</text>
							</u-grid-item>
							<u-grid-item>

								<text
									class="icon font-size-18 font-bold color-price price">{{info.teamWallet.priceAll}}</text>
								<text class="grid-text font-size-10 u-info">{{$t('累计充值')}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</base-panel-title>
			</view>


			<view class="info  font-size-10 color-label     text-center ">
				{{$t('统计最近{0}个月的数据',[6])}}
			</view>

		</view>

	</b-layout-index>
</template>

<script>
	import {
		getMyStastica
	} from "@/api/stastica.js"
	export default {
		data() {
			var s = uni.$u.timeFrom(new Date(), 'yyyy-mm-01')
			var e = uni.$u.timeFrom(new Date(), 'yyyy-mm-dd')
			return {
				info: {},
				calendarFlag: false,
				minDate: new Date("2022-01-01").getTime(),
				maxDate: new Date().getTime(),
				startDate: s,
				endDate: e,
			}
		},
		onLoad: function() {
			this.getFindByStastica()
		},
		methods: {
			getFindByStastica: function() {
				var the = this;
				var param = {
					startDate: the.startDate,
					endDate: the.endDate
				}
				getMyStastica(param).then(res => {
					the.info = res;
				})
			},
			openCalendar: function() {
				this.calendarFlag = true
			},
			closeCalendar: function() {
				this.calendarFlag = false
			},
			calendarConfirm: function(e) {
				console.log(e.length)
				if (e.length > 0) {
					this.startDate = e[0];
					this.endDate = e[(e.length - 1)]
					this.getFindByStastica()
					this.calendarFlag = false
				}
			}
		}
	}
</script>

<style>
	.icon {
		height: 30px;
	}

	.dateheader {
		height: 40px;
		background-color: #FFFFFF;
		text-align: center;
		line-height: 40px;
	}
</style>